<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  </meta>
  <script charset="utf-8" th:src="@{/js1/jquery.min.js}"></script>
  <script charset="utf-8" th:src="@{/js1/global.js}"></script>
  <script charset="utf-8" th:src="@{/js1/bootstrap.min.js}"></script>
  <script charset="utf-8" th:src="@{/js1/template.js}"></script>

  <link rel="stylesheet" th:href="@{/css1/bootstrap.css}" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" th:href="@{/css1/style.css}" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" th:href="@{/css1/member.css}" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" th:href="@{/css1/order3.css}" rel="stylesheet" type="text/css" />
  <script charset="utf-8" th:src="@{/js1/TouchSlide.js}"></script>
  <script charset="utf-8" th:src="@{/js1/index.js}"></script>
  <title>首页</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no" name="format-detection">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1;user-scalable=no;">
  <style>
    .ban-img {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;

    }

    .ban-img .img {
      width: 50%;
      /* padding: 0 10px; */
      box-sizing: border-box;
    }

    .ban-img .img:nth-child(2n) {
      padding-left: 10px;
    }

    .ban-img .img:nth-child(2n+1) {
      padding-right: 10px;

    }

    .ban-img .img img {
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <header class="header">
    <div class="fix_nav">
      <div style="max-width:768px;margin:0 auto;height: 44px;position: relative;background:#fff;">
        <form action="/m_search/list" method="get" id="searchform" name="searchform">
          <div class="navbar-search left-search">
            <input type="text" id="keyword" name="keyword" value="" placeholder="搜索商品" class="form-control">
          </div>
          <div class="nav-right">
            <input type="button" value="搜索" onclick="searchproduct();" class="img-responsive"
              style="text-align:center;background:#ccc;border-radius: 5px;border:none;height:34px;vertical-align:middle;clear:both;padding:0px;width:42px;" />
          </div>
        </form>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="row">
      <div id="slide">
        <div class="hd">
          <ul>
            <li class="on" th:each="entries,stat:${product}">1</li>
          </ul>
        </div>
        <div class="bd">
          <div class="tempWrap" style="overflow:hidden; position:relative;">
            <ul
              style="width: 3072px; position: relative; overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms; transform: translateX(-768px);">
              <li style="display: table-cell; vertical-align: middle; max-width: 768px;"
                th:each="entries,stat:${product}">
                <a th:href="@{'/product/getpro.do?id='+${entries.id}}"><img
                    style="max-width:100vw;max-height:80vw;margin:auto;" th:src="${entries.image}"></a>
              </li>

            </ul>
          </div>
        </div>
      </div>
    </div>


    <script>
      TouchSlide({
        slideCell: "#slide",
        titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell: ".bd ul",
        effect: "left",
        autoPlay: true,//自动播放
        autoPage: true, //自动分页
        switchLoad: "_src" //切换加载，真实图片路径为"_src"
      });
    </script>

    <div class="row category" id="category">
    </div>
    <div class="ban-img">
      <div class="img"><img
          src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/49601/16/12206/115887/5d91b4d5E34709952/aba2bcb4855e6e52.png!q70.jpg.dpg"
          alt=""></div>
      <div class="img"><img
          src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/49601/16/12206/115887/5d91b4d5E34709952/aba2bcb4855e6e52.png!q70.jpg.dpg"
          alt=""></div>
    </div>

    <script th:inline="javascript">
      var dir = "pdate,desc";
      //加载分类
      $.get("/mall/admin/classification/list.do?type=1&pageindex=-1", function (data) {
        if (data.state == 0) {
          var list = $("#category");
          $(data.data).each(function (index, item) {
            var cat = $(" <a href='/mall/product/category_list.html?csid=" + item.id + "' class='col-xs-3'><img class='img-responsive' src='/mall/img/icon_pp.jpg'><h4>" + item.cname + "</h4></a>");

            list.append(cat);
          })
        } else {
          alert(data.message);
        }
      });

    </script>


    <div class="row" id="chanpinkuai">
    </div>


  </div>
  <footer class="footer">
    <div class="foot-con">
      <div class="foot-con_2">
        <a href="/mall/mallindex.html" class="active">
          <i class="navIcon home"></i>
          <span class="text">首页</span>
        </a>
        <a href="/mall/category.html ">
          <i class="navIcon sort"></i>
          <span class="text">分类</span>
        </a>
        <a href="/mall/newOrder/shopcart.html">
          <i class="navIcon shop"></i>
          <span class="text">购物车</span>
        </a>
        <a href="/mall/userhome.html">
          <i class="navIcon member"></i>
          <span class="text">我的</span>
        </a>
      </div>
    </div>
  </footer>

  <script type="text/javascript">
    $(document).ready(function () {
      $("#slide img").each(function () {
        var img_src = $(this).attr("_src");
        $(this).attr("src", img_src);
      });
    });

    function searchproduct() {
      var keyword = document.getElementById("keyword").value;
      if (keyword == undefined || keyword == null || keyword == "") {
        alert("请输入搜索关键字！");
        return false;
      }
      document.getElementById("searchform").submit();
    }



  </script>




</body>

</html>
<SCRIPT Language=VBScript></SCRIPT>